<template>
	<view>
		<uni-list-item showArrow :title="item.name" link v-for="(item,index) in list" @click="handleCilck(item)">
			<view class="flex align-center px-2" slot="right">
				<text class=" ml-2 text-muted font">
					{{item.data}}
				</text>
			</view>
		</uni-list-item>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			uniListItem,
		},
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.__init()
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		methods: {
			//初始化数据
			__init() {

				let list = [{
						name: "手机号",
						data: this.userinfo.phone ? this.userinfo.phone : '未绑定',
						type: 'navigateto',
						url: '/pages/user-phone/user-phone'
					},
					{
						name: "登录密码",
						data: this.userinfo.password ? '修改密码' : '未设置',
						type: 'navigateto',
						url: '/pages/user-password/user-password'
					},
					{
						name: "邮箱绑定",
						data: this.userinfo.email ? this.userinfo.email : '未绑定',
						type: 'navigateto',
						url: '/pages/user-email/user-email'
					},
				]
				this.$H.get('/user/getuserbind', {}, {
					token: true
				}).then(res => {
					this.$store.commit('editUserInfo', {
						key: "userbind",
						value: res
					})
					let other = [{
							name: "微信账号",
							data: this.userinfo.userbind.weixin ? this.userinfo.userbind.weixin.nickname :
								"未绑定",
							type: "bind",
							provider: "weixin"
						},
						{
							name: "微博账号",
							data: this.userinfo.userbind.sinaweibo ? this.userinfo.userbind.sinaweibo
								.nickname : "未绑定",
							type: "bind",
							provider: "sinaweibo"
						},
						{
							name: "QQ账号",
							data: this.userinfo.userbind.qq ? this.userinfo.userbind.qq.nickname : "未绑定",
							type: "bind",
							provider: "qq"
						},

					]
					this.list = [...list, ...other]
				}).catch(err => {
					console.log(err)
				})

			},
			handleCilck(item) {
				if (item.type === '') return
				switch (item.type) {
					case 'navigateto':
						uni.navigateTo({
							url: item.url,
						});
						break;
					case 'bind':
						if (item.data !== '未绑定') {
							return uni.showToast({
								title: '您已经绑定过了哦!',
								icon: 'none'
							});
						}
						this.bind(item.provider)
						break;
					default:
						break;
				}
			},
			//第三方绑定方法
			bind(provider) {
				uni.login({
					provider: provider,
					success: (loginRes) => {
						// 获取用户信息
						uni.getUserInfo({
							provider: provider,
							success: (infoRes) => {
								let obj = {
									provider: provider,
									openid: infoRes.userInfo.openId || infoRes.userInfo.id,
									nickName: infoRes.userInfo.nickName,
									avatarUrl: infoRes.userInfo.avatarUrl
								}
								this.$H.post('/user/bindother', obj, {
									token: true,
									nactive: true
								}).then(res => {
									console.log(res)
									if (res.data.errorCode) {
										return uni.showToast({
											title: '该账号'+ res.data.msg,
											icon: 'none'
							 		});
									}
									this.__init()
									uni.showToast({
										title: '绑定成功',
										icon: 'none'
									});
								})
							}
						});
					}
				});
			}
		}
	}
</script>

<style>

</style>
